import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Tab from "../tab"
import "./form.less"
import "../../Common.less"
import { worker } from "../../utils/worker"
import { Form, Input, Select, Radio, TreeSelect, Switch } from 'antd';
class PropsEdit extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            propTypeList: [],
            partList: [],
            visibleList: [],
            effictiveList: [],
            plist: [],
            pileShow: false,
            partShow: false,
        }
        this.onConfirm = this.onConfirm.bind(this)
        this.treeSelect = this.treeSelect.bind(this)
        this.onSelect2 = this.onSelect2.bind(this)
    }
    onConfirm(params = {}) {
        return new Promise((resolve, reject) => {
            const {form}=this.props;
            form.validateFields(async (error, values) => {
                values.constraints = {}
                let { required, precision, min, max, regExp } = values
                Object.assign(values.constraints, { required, precision, min, max, regExp })
                if (JSON.stringify(values.constraints) == "{}") {
                    values.constraints = null
                }
                if (!error) {
                    await this.setState({
                        confirmData: values,
                        confirmType: 2
                    })
                    if (params.onSuccess) {
                        params.onSuccess(values);
                    }
                    resolve()
                } else {

                    if (params.onError) {
                        params.onError(error);
                    }
                    reject()
                }

            })
        })

    }
    async treeSelect(e, a) {
        const { extra, form } = this.props;
        extra.definitionTreeName = a.props.parentName
        extra.definitionTreeId = a.props.id
        extra.parentId = a.props.parentId

        let res = await this.props.cusPropsList({ definitionPartId: e })
        this.setState({
            propsList: res,
            partShow: true,
            pileShow: a.props.isCol == 0 ? true : false
        })
        form.setFieldsValue({
            propertyId: null
        })
    }
    onSelect2(a, b) {
        this.props.form.setFieldsValue({
            name: b.props.children
        })
    }
    async componentDidMount() {
        let { dictlist, extra,onLoaded,getCateTree,cusPropsList } = this.props;
        if (onLoaded) {
           onLoaded(this);
        }
        
        let res = await getCateTree()
        let resc = await worker.loopTreeNode3(res, extra.checkedKeys, true,true)

        if (resc) {
            this.setState({
                expandedKeys: resc.map(item => String(item.key)),
                treeData: resc
            })
        }
        const obj = await worker.getTreeNode(res, extra.propData.definitionPartId)
        if (extra.checkedKeys && !extra.checkedKeys.includes(String(extra.propData.definitionPartId))) {
            extra.propData.definitionPartId = null
        }
        let res3 = await cusPropsList({ definitionPartId: extra.propData.definitionPartId })
        this.setState({
            propsList: res3,
            pileShow: obj && obj.isCol == 0 ? true : false,
            partShow: true,
        })
        const { colNum } = this.props.extra;
        let arr = []
        if (colNum - 0 > 0) {
            for (let i = 0; i < colNum; i++) {
                arr.push({
                    id: i + 1,
                    name: i + 1
                })
            }
        } else {
            arr.push({
                id: 0,
                name: '无'
            })
        }
        this.setState({
            plist: arr,
            isShowList: dictlist.filter(item => item.dictType == "is_show"),
            isEffectiveList: dictlist.filter(item => item.dictType == "is_effective"),
            isRequiredList: dictlist.filter(item => item.dictType == "is_required"),
            propertyTypeList: dictlist.filter(item => item.dictType == "property_type"),
            unitlist: dictlist.filter(item => item.dictType == "unit"),
            blockList: dictlist.filter(item => item.dictType == "dynamic_block"),
        })

    }
    render() {
        const { form, extra } = this.props;
        const { getFieldDecorator } = form;
        const { partShow, pileShow, plist, isShowList, isEffectiveList, isRequiredList, propertyTypeList, treeData, unitlist, propsList } = this.state
        return (
            <Form
                style={{ marginTop: "20px" }}
                labelAlign="right"
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 17 }}
            >
                <Form.Item className="half" label='KEY'>
                    {getFieldDecorator('key', {
                        rules: [
                            { required: true, message: 'key' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.key : null
                    })(
                        <Input disabled={extra.mode == 'edit'} placeholder="请输入属性名称" />
                    )}
                </Form.Item>
                <Form.Item disabled={extra.mode == 'edit'} className="half" label='属性名称'>
                    {getFieldDecorator('name', {
                        rules: [
                            { required: true, message: '属性名称' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.name : null
                    })(
                        <Input placeholder="请输入属性名称" />
                    )}
                </Form.Item>
                <Form.Item className="half" label='属性值'>
                    {getFieldDecorator('defaultValue', {
                        rules: [
                            { required: true, message: '属性值' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.defaultValue : null
                    })(
                        <Input placeholder="请输入属性值" />
                    )}
                </Form.Item>
                <Form.Item className="half" label='单位'>
                    {getFieldDecorator('unit', {
                        rules: [
                            { required: true, message: '单位' }
                        ],
                        initialValue: extra.propData ? extra.propData.unit : 76
                    })(
                        <Select placeholder="请选择单位">
                            {
                                unitlist && unitlist.length ? unitlist.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>

                <Form.Item className="half" label='属性类型'>
                    {getFieldDecorator('type', {
                        rules: [
                            { required: true, message: '属性类型' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData && extra.propData.type ? extra.propData.type - 0 : 66
                    })(
                        <Select placeholder="请选择属性类型">
                            {
                                propertyTypeList && propertyTypeList.length ? propertyTypeList.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>
                <div className="half">

                </div>
                {
                    treeData && extra ? <Form.Item className="half" label='所属部位'>
                        {getFieldDecorator('definitionPartId', {
                            rules: [
                                { required: true, message: '所属部位' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData && extra.propData.definitionPartId ? String(extra.propData.definitionPartId) : undefined
                        })(
                            <TreeSelect
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                placeholder="请选择构件"
                                treeData={treeData}
                                onSelect={this.treeSelect}
                                treeDefaultExpandAll
                            ></TreeSelect>
                        )}

                    </Form.Item> : undefined
                }

                {
                    pileShow ? <Form.Item label='选择墩号' className="half">
                        {getFieldDecorator('pileNumber', {
                            rules: [
                                { required: true, message: '选择墩号' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData && extra.propData.pileNumber ? extra.propData.pileNumber : null
                        })(
                            <Select placeholder="请选择墩号" showSearch filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                                {
                                    plist && plist.length ? plist.map(item => {
                                        return (
                                            <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                        )
                                    }) : undefined
                                }

                            </Select>
                        )}

                    </Form.Item> : undefined
                }
                {
                    partShow && propsList ? <Form.Item className="half" label='自定义属性'>
                        {getFieldDecorator('propertyId', {
                            rules: [
                                { required: false, message: '自定义属性' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.propertyId : null
                        })(
                            <Select onSelect={this.onSelect2} placeholder="自定义属性" showSearch filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                                {
                                    propsList && propsList.length ? propsList.map(item => {
                                        return (
                                            <Select.Option value={item.id} key={item.id}>{item.name.replace(/^([^\,]*).*$/, function ($all, $1) { return $1 })}</Select.Option>
                                        )
                                    }) : undefined
                                }

                            </Select>
                        )}
                    </Form.Item> : undefined
                }
                {
                    pileShow ? <div className="half">

                    </div> : undefined
                }
                 <Form.Item  className="half" label='是否可见'>
                        {getFieldDecorator('isShow', {
                            rules: [
                                { required: true, message: '是否可见' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData && extra.propData.isShow ? extra.propData.isShow : 70
                        })(
                            <Select placeholder="请选择是否可见">
                                {
                                    isShowList && isShowList.length ? isShowList.map(item => {
                                        return (
                                            <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                        )
                                    }) : undefined
                                }

                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item  className="half" label='是否有效'>
                        {getFieldDecorator('isEffective', {
                            rules: [
                                { required: true, message: '是否有效' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData && extra.propData.isEffective ? extra.propData.isEffective : 72
                        })(
                            <Select placeholder="请选择是否有效">
                                {
                                    isEffectiveList && isEffectiveList.length ? isEffectiveList.map(item => {
                                        return (
                                            <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                        )
                                    }) : undefined
                                }

                            </Select>
                        )}
                    </Form.Item>

                <Form.Item labelCol={{ span: 3 }}
                    wrapperCol={{ span: 18 }} style={{ 'width': "100%", float: 'none', overflow: 'hidden' }} label='约束'>
                    {getFieldDecorator('constraints', {
                        rules: [
                            { required: false, message: '约束' }
                        ],
                    })(
                        <Form
                            style={{ marginTop: "35px", border: '1px solid #ececec', padding: "15px" }}
                            labelAlign="right"
                            className="innerForm"
                            labelCol={{ span: 3 }}
                            wrapperCol={{ span: 21 }}

                        >
                            <Form.Item style={{ 'marginBottom': '0', width: '100%' }} label='是否必要'>
                                {getFieldDecorator('required', {
                                    rules: [
                                        { required: false, message: '是否必要' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.constraints && extra.propData.constraints.required ? extra.propData.constraints.required : 74
                                })(
                                    <Radio.Group>
                                        {
                                            isRequiredList && isRequiredList.length ? isRequiredList.map((item, index) => {
                                                return (
                                                    <Radio.Button key={item.id} value={item.id}>{item.dictLabel}</Radio.Button>
                                                )
                                            }) : undefined
                                        }

                                    </Radio.Group>,
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: '100%' }} label='小数位数'>
                                {getFieldDecorator('precision', {
                                    rules: [
                                        { required: false, message: '小数位数' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.constraints ? extra.propData.constraints.precision : null
                                })(
                                    <Input placeholder="小数位数" />
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: '100%' }} label='最小值'>
                                {getFieldDecorator('min', {
                                    rules: [
                                        { required: false, message: '最小值' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.constraints ? extra.propData.constraints.min : null
                                })(
                                    <Input placeholder="最小值" />
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: '100%' }} label='最大值'>
                                {getFieldDecorator('max', {
                                    rules: [
                                        { required: false, message: '最大值' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.constraints ? extra.propData.constraints.max : null
                                })(
                                    <Input placeholder="最大值" />
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: '100%' }} label='正则规则'>
                                {getFieldDecorator('regExp', {
                                    rules: [
                                        { required: false, message: '正则规则' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.constraints ? extra.propData.constraints.regExp : null
                                })(
                                    <Input placeholder="正则规则" />
                                )}
                            </Form.Item>
                        </Form>
                    )}
                </Form.Item>
                <Form.Item className="half" label='备注'>
                    {getFieldDecorator('remark', {
                        rules: [
                            { required: false, message: '备注' }
                        ],
                    })(
                        <Input placeholder="备注"></Input>
                    )}
                </Form.Item>
                <div className="half"></div>
            </Form>
        )
    }
}
export default connect(
    ({ dict: { dictlist } }) => ({
        dictlist
    }),
    dispatch => ({
        getCateTree: (values) => dispatch({
            type: 'structure/getCateTree',
            payload: values
        }),
        cusPropsList: (values) => dispatch({
            type: 'cusProps/cusPropsList',
            payload: values
        }),
    })
)(Form.create('propsEdit', {

})(PropsEdit));